<template>
    <div>
        <el-dialog
                title="商品购买"
                :visible.sync="orderShow"
                :show-close="false"
                :before-close="handleClose"
                @open="onOpen"
                ref="dialog">
            <div style="height: 220px">
                <el-form label-position="right" :model="OrderForm" :rules="rules" ref="ruleForm" label-width="86px">
                    <el-form-item label="商品名称">
                        <el-input v-model="GoodsName" :label="GoodsName" disabled/>
                    </el-form-item>
                    <el-form-item label="订单数量">
                        <el-input-number v-model="OrderForm.num" :min="1" :max="goodsOrder.stock"/>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="OrderForm.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>

                </el-form>
                <div style="float: right;">
                    <el-button type="primary" size="mini" icon="el-icon-upload2" @click="fixSubmit">提交</el-button>
                </div>
            </div>
            <pay-page ref="pay" :orderMap="orderContent" @saveTheOrder="saveTheOrder"></pay-page>
        </el-dialog>
    </div>
</template>

<script>
    import {saveOrder} from '@/utils/apis/goods'
    import PayPage from "@/views/PayPage";

    export default {
        name: "GoOrder",
        components: {
            PayPage
        },
        data() {
            let checkPhone = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入手机号"));
                } else if (!this.isCellPhone(value)) {
                    // 引入methods中封装的检查手机格式的方法
                    callback(new Error("请输入正确的手机号!"));
                } else {
                    callback();
                }
            };
            return {
                rules: {
                    phone: [{required: true, validator: checkPhone, trigger: 'blur'}]
                },
                //维修单
                OrderForm: {
                    phone: '',
                    num: 0,
                },
                GoodsName: '',
                orderContent: {
                    type: 'goods',
                    price: 0,
                    subject: 'vitality健身房商品'
                }

            }
        },
        props: ['orderShow', 'goodsOrder'],
        methods: {
            //打开窗口的回调
            onOpen() {
                this.initData()
            },
            async initData() {
                const obj = JSON.parse(JSON.stringify(this.goodsOrder))
                this.GoodsName = obj.name
                this.OrderForm.goodsId = obj.id
            },
            handleClose() {
                this.$refs['ruleForm'].clearValidate()
                this.cancel()
            },
            cancel() {
                this.OrderForm = {
                    phone: '',
                    num: 0,
                }
                this.$emit('cancel')
                this.$notify.info('取消购买')
            },
            fixSubmit() {
                this.orderContent.price = this.goodsOrder.price * this.OrderForm.num
                this.orderContent.subject += this.GoodsName
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.$refs.pay.closeModal()
                        this.$refs.pay.toPayment()
                    }
                })
            },
            saveTheOrder() {
                saveOrder(this.OrderForm).then(res => {
                    this.$message.success('订单完成')
                    this.$emit('cancel')
                    this.$emit('updateSuccess')
                })
            },
            //判断是否为手机号
            isCellPhone(val) {
                if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
                    return false;
                } else {
                    return true;
                }
            },
        }
    }
</script>

<style scoped>

</style>